<script>
import UpdatePwdDialog from "@/components/comp/doctor_comm/UpdatePwdDialog.vue";

export default {
  name: "HomeView",
  components: {UpdatePwdDialog},
  data(){
    return {
      menus:[],
      first_menu_icon:[],
      def_url: 'user_list',
      my_role:'管理员'
    }
  },
  created() {
    this.define_icons();
    this.getMenus();
    //取出当前应被激活的菜单
    const url = sessionStorage.getItem("clicked_url");
    if(url){
        this.def_url = url;
    }
  },
  computed:{
    roleName(){
      return sessionStorage.getItem("uname");
    },
    role(){
      return sessionStorage.getItem("role")
    }
  },
  methods:{

    //据不同的角色来定制菜单图标,并跳转到不同的主页
    // ['icon-yonghu1','icon-gerenxinxi','icon-yisheng-01','icon-datiqia','icon-shujufenxi','icon-congtikuzhongdaorutimu-1-01']
    define_icons(){
      if(this.role==1){
        this.my_role = "当前用户"
        this.$router.push("account_info");
        this.first_menu_icon = ['icon-gerenxinxi','icon-datiqia','icon-shujufenxi'];  //用户界面对应的菜单图标
        // this.$router.push("account_info");              //用户登陆后跳转到用户详情
        sessionStorage.setItem("clicked_url","account_info"); //存储用户详情为当前激活菜单
      }else if(this.role==2){
        this.my_role = "操作员"
        this.first_menu_icon = ['icon-yonghu1','icon-renwu','icon-shujufenxi'];
        this.$router.push("account_list");
        sessionStorage.setItem("clicked_url","account_list");
      }else if(this.role==3){
        this.my_role = "管理员"
        this.first_menu_icon = ['icon-yonghu1','icon-yisheng-01','icon-shujufenxi','icon-congtikuzhongdaorutimu-1-01'];
        this.$router.push("account_list");
        sessionStorage.setItem("clicked_url","account_list");
      }
    },



    //退出系统，清空token
    exit(){
       //清空token，并跳转到登陆页
       sessionStorage.removeItem("token");
       this.$router.push('/login');
    },

    //加载用户菜单信息，并根
    getMenus(){
        const _this = this;
        this.$http.get("menus/get_menus",{params:{role:this.role}}).then(res=>{
          _this.menus = res.data.data;
        })
    },

    //当点击其它菜单时，保存激活状态
    changeActiveMenu(url){
      if(url!=null && ""!=url){
        this.def_url = url;
        sessionStorage.setItem("clicked_url",url);
      }
    },

    //点击管理员名称时，弹出修改密码弹框
    show_dig(){
      this.$refs.change_pwd_dig.show_dialog();
    }
  }
}
</script>

<template>
  <el-container class="contain">
    <el-header class="header">
      <div class="header-left">
        <img src="../assets/imgs/logo.png" class="logo">
         　具身情感认知老化评测系统
      </div>

      <div class="header-right">
       {{my_role}}：&nbsp;
        <el-link @click="show_dig" type="primary" style="color:white;margin-right: 25px;font-size:14px;padding-bottom: 3px">
          {{ roleName }}
        </el-link>　
        <el-button @click="exit" size="small" type="primary" style="margin-right: 10px">退出</el-button>
      </div>
    </el-header>
    <el-container>
<!------------------------------------- 侧边导航栏  ------------------------------------------->
      <el-aside width="200px"  class="aside">
        <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            background-color="#587a9b"
            text-color="white"
            router
            :default-active = "this.def_url"
            active-text-color="#ffd04b">


              <el-submenu :index="menu.id+''" v-for="(menu,index) in menus" :key="menu.id">
                <template slot="title">
                  <i :class="'iconfont ' + first_menu_icon[index]" style="color: white;margin-right: 10px"></i>
                  <span>{{menu.name}}</span>
                </template>
                          <el-menu-item @click="changeActiveMenu(son.url)" :index="son.url" v-for="son in menu.son_menus" :key="son.id">
                            <template slot="title">
                              <i class="el-icon-location"></i>
                              <span>{{ son.name }}</span>
                            </template>
                          </el-menu-item>
              </el-submenu>
        </el-menu>
      </el-aside>



      <el-main class="main">
          <router-view></router-view>
      </el-main>
    </el-container>

<!--------------------------------------修改管理员密码--------------------------------------------------------->
    <UpdatePwdDialog ref="change_pwd_dig"></UpdatePwdDialog>
  </el-container>

</template>

<style scoped>
.contain{
  height: 100%;
}

.header{
  width: 100%;
  height: 500px;
  background-color: #5fa0e0;
  display: flex;
  justify-content: space-between;
  color: white;
  align-items: center;
  font-size: 14px;
  padding: 0px;
}
.header-left{
  display: flex;
  align-items: center;
}
.logo{
  width: 45px;
  height: 45px;
  border-radius: 50%;
  margin-left: 10px;
}


.aside{
  width: 200px;
  background-color: #587a9b;
}
.el-menu{
  border: 0px;
}

.main{
  width: 100%;
}
</style>